<template>
  <div class="box">
    <header class="header">
      <van-nav-bar left-text="Y 购" >
        <template #right>
          <van-icon name="search" size="18" />
        </template>
        <template #title>
          <van-search disabled @click="gosearsh" placeholder="请输入搜索关键词" />
        </template>
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
    </header>
    <div class="content" id="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item of bannerlist" :key="item.bannerid">
          <van-image lazy-load :src="item.img"/>
        </van-swipe-item>
      </van-swipe>
      <h2>热推</h2>
      <Prolist :prolist='hotlist' :hot='true'></Prolist>
      <h2>全部产品</h2>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <Prolist :prolist='prolist'></Prolist>
        </van-list>
      </van-pull-refresh>
      <div class="backtop" v-if="flag" @click="backtop">
        <van-icon name="upgrade" size="36" />
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Lazyload, Image,NavBar,Icon,Search,List,PullRefresh } from 'vant'
import { getProlist,getBannerlist } from '@/api'
import Prolist from '@/components/prolist'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Lazyload)
Vue.use(Image)
Vue.use(NavBar) 
Vue.use(Icon)
Vue.use(Search)
Vue.use(List)
Vue.use(PullRefresh)
export default {
  data () {
    return {
      prolist: [],
      hotlist: [],
      bannerlist: [],
      loading: false,
      finished: false,
      isLoading: false,
      flag:false,
      count: 1
    }
  },
  // 注册组件
  components: {
    Prolist
  },
  // 自定义的函数
  methods: {
    //跳转到搜索页面
    gosearsh () {
      this.$router.push('/search')
    },
    //上拉加载
    onLoad() {
      console.log('可以加载数据了')
      // 异步更新数据
      this.loading = true //可以加载了
      getProlist ({ limit: 10 ,count: this.count }).then(res => {
        this.loading = false //加载结束
        //判断是否还有数据
        if(res.data.len === 0) {
          this.finished = true //表示数据加载完毕了，没有数据了
        }else {
          //拼接数据
          this.prolist = [...this.prolist, ...res.data.data]
          //页面加一
          this.count += 1
        }
      })

    },
    //下拉刷新
    onRefresh () {
      //下拉刷新
      this.isLoading = true
      getProlist ().then(res => {
        this.isLoading = false //刷新结束
        //重置列表数据
        this.prolist = res.data.data
        this.count = 1
        this.finished = false
      })
    },
    // 监听滚动
    handleScroll () {
      const scrollTop = document.getElementById('content').scrollTop
      // console.log(scrollTop)
      if (scrollTop > 500) {
        this.flag = true
      }else{
        this.flag = false
      }
    },
    // 返回顶部
    backtop () {
      document.getElementById('content').scrollTop = 0
    }
  },
  // 这是vue的钩子函数，用来请求数据
  mounted () {
    // 产品数据
    getProlist().then(res => {
      this.prolist = res.data.data
      console.log(this.prolist )
      const arr = res.data.data.filter(item => {
        return item.flag === 1
      })
      //把过滤的数据赋值给hotlist
      this.hotlist = arr
      document.getElementById('content').addEventListener("scroll",this.handleScroll,false)
    })
    // 轮播图数据
    getBannerlist().then(res => {
      this.bannerlist = res.data.data
    })
  }
}
</script>
<style lang='scss' scoped>
.van-search{
  padding: 5px 12px;
}
.van-nav-bar{
  .van-nav-bar__title{
    max-width: 70%;
  }
}
.backtop{
  position: fixed;
  right: 10px;
  bottom: 55px;
  width: 36px;
  height: 36px;
  background-color: #fff;
  border-radius: 50%;
}
</style>
